<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>点击click</title>
		<script type="text/javascript" src="../js/vue.js"></script>
		<style>
			a:link {
				color: green
			}

			a:hover {
				color: red;
			}

			.vif {
				width: 1000rpx;
				height: 500rpx;
				background-color: blueviolet;
				color: white;
			}

			.velse {
				width: 1000rpx;
				height: 500rpx;
				background-color: red;
			}
		</style>
	</head>

	<body>
		<div id="root">
			<h1>今天天气很{{weather}}</h1>
			<a href.pre="www.baidu.com">跳转</a>
			<button type="mini" @click="change($event)">点击切换</button>
			<div class="vif" v-if="n%2===0">
				{{n}}
			</div>
			<div class="velse" v-else>
				{{n}}
			</div>
			<button type="mini" @click="plus">++</button>

			<div class="vif">
				<h1 v-for="(value,index) in animal" :key="index">{{index+1}}.{{value.name}}/{{value.eat}}</h1>
			</div>

		</div>
		<script type="text/javascript">
			const vm = new Vue({
				el: "#root",
				data: {
					weather: "炎热",
					isHot: true,
					n: 0,
					animal: [{
							name: "旺财",
							eat: "骨头"
						},
						{
							name: "喵喵",
							eat: "鱼"
						}
					],
					num: "123456"
				},
				methods: {
					change(event) {
						this.isHot = !this.isHot
					},
					plus() {
						this.n++;
					}
				},
				watch: {
					isHot: {
						immediate: true,
						handler(newValue, oldValue) {
							console.log("@@@@", newValue, oldValue);
							this.weather = this.isHot ? "炎热" : "清爽"
						}
					}
				}
			})

		</script>
	</body>
</html>